<template>
  <div>
      <van-nav-bar
  title="搜索"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
/>
    <main >
      <div v-for="(item, index) in goods" :key="index">
        <img :src="item.pic" alt />
        <p>￥{{item.title}}</p>
        <p>{{item.price}}</p>
      </div>
    </main>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      goods: []
    };
  },
  mounted() {
    let kw = this.$route.query.kw;
    axios
      .get("http://localhost:8080/list.json")
      .then(res => {
        let goods = res.data.result;
        goods.map(item => {
          if (item.title.includes(kw)) {
            this.goods.push(item);
          }
        });
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    onClickLeft(){
      window.history.back()
    }
  },
};
</script>

<style scoped>
main{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
main div img,main div{
    width: 200px;
}
</style>